// 如何在webpack 构建中的项目 使用 Vue开发

// 复习
// 在普通网页如何使用vue、
// 1.引包 然后创建vm一个实例 然后创建一个容器div


// 在webpack中 尝试使用vue
// 导入最全的包 因为main入口是阉割版的 我们用最全的
// import Vue from '../node_modules/vue/dist/vue'

// 第二种方法 见webpack.config.js
import Vue from 'vue'

import login from './login.vue'
import { title } from './test'



// var login = {
//     template: '<h1>login</h1>'
// }


// 1. 导入 login.vue组件
// 默认webpack无法打包.vue文件 需要安装 相关的loader 
// cnpm i vue-loader vue-template-compiler -D
// 在配置文件中 新增loader配置项 


var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    // components: {
    //     login
    // },
//    render: function (createElements) {
//     //    在webpack中 如果想要通过vue 吧一个组件放到页面中去展示 vm实例中的render才可以实现
//        return createElements(login)
//    }
    render:  c =>  c(login)
})

import { title as aaaaa,content } from './test'
// 可以使用 as xxx 给导出的成员起别名
console.log(title+'1111'+content)


// 总结
// 1, 安装vue的包 cnpm i vue -S
// 2. 由于在webpack中 推荐使用.vue这个组件模板文件定义组件 所有需要安装可以解析这种文件的loader cnpm i vue-loader@14 vue-template-complider -D
// 3.在main.js中 导入vue 模块 import Vue from 'vue
// 4.定义一个 .vue 的组件 启动 组件有3部分组成 第一部分 template 第二部分 script 第三部分 style
// 5.使用 import导入这个组件
// 6.创建 vm的实例
// 7.在页面创建1个 div为 app的元素 作为一个被窝们控制的区域